//实现图片从右边
import type { Directive } from "vue";

const scrollFull: Directive = {
  mounted(el: HTMLElement) {
    // 图片从左滑入，其他元素从下方滑入
    const isImg = el.tagName.toLowerCase() === "img";

    el.style.opacity = "0";
    el.style.transform = isImg ? "translateX(50px)" : "translateY(40px)";
    el.style.transition = "opacity 2s ease, transform 5s ease"; // ⏱ 延长到 n 秒

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          el.style.opacity = "1";
          el.style.transform = "translateX(0)";
          if (!isImg) el.style.transform = "translateY(0)";
          observer.unobserve(el);
        }
      },
      { threshold: 0.1 }
    );

    observer.observe(el);
    (el as any)._fadeObserver = observer;
  },
  unmounted(el: any) {
    el._fadeObserver?.disconnect();
  }
};

export default scrollFull;
